<template>
  <div>
    <!-- <Verify ref="verify" :captcha-type="'blockPuzzle'" :img-size="{ width: '400px', height: '200px' }" @success="handleLogin" /> -->
    <el-form ref="primaryLoginForm" :model="primaryLoginForm" :rules="primaryLoginRules" auto-complete="on">
      <el-form-item prop="loginAccount">
        <el-input ref="loginAccount" v-model="primaryLoginForm.loginAccount" placeholder="手机/账号/邮箱/工号" name="loginAccount" type="text" auto-complete="on" />
      </el-form-item>

      <el-form-item prop="password">
        <el-input :key="passwordType" ref="password" v-model="primaryLoginForm.password" :type="passwordType" placeholder="密码" name="password" auto-complete="on" @keyup.enter.native="handleLogin" />
      </el-form-item>

      <el-button :loading="loading" type="primary" style="width: 100%; margin: 10px 0 20px" @click.native.prevent="handleCheck"> 登 录 </el-button>
    </el-form>
  </div>
</template>

<script>
import { validateMail, validatePhone } from '@/utils/validate.js'
// import { captchaApi } from '@/api/api'

export default {
  name: 'LogByPrimary',
  // components: {
  //   Verify: () => import('../../components/verifition/Verify')
  // },
  props: {
    redirect: {
      type: String,
      default: '/'
    }
  },
  data() {
    return {
      loading: false,
      passwordType: 'password',
      // 账号登录下表单
      primaryLoginForm: {
        loginAccount: '',
        password: '',
        type: 3
      },
      // 账号登录表单验证
      primaryLoginRules: {
        loginAccount: [
          { required: true, trigger: 'blur', message: '请输入账号' }
          // { validator: validateStaffNumOrMailOrPhone, trigger: 'blur' }
        ],
        password: [{ required: true, trigger: 'blur', message: '请输入密码' }]
      }
    }
  },
  methods: {
    // 校验
    handleCheck() {
      this.$refs.primaryLoginForm.validate(async (valid) => {
        if (valid) {
          let isPhoneOrMail = false
          //如果是手机号，type改为1
          validatePhone(null, this.primaryLoginForm.loginAccount, (err) => {
            if (!err) {
              this.primaryLoginForm.type = 1
              isPhoneOrMail = true
            }
          })
          //如果是邮箱，type改为2
          validateMail(null, this.primaryLoginForm.loginAccount, (err) => {
            if (!err) {
              this.primaryLoginForm.type = 2
              isPhoneOrMail = true
            }
          })
          //不是手机也不是邮箱，type改为3
          if (!isPhoneOrMail) {
            this.primaryLoginForm.type = 3
          }
          // this.$refs.verify.show()
          this.handleLogin()
        } else {
          return false
        }
      })
    },
    // 登录事件  captcha是滑块验证返回的二次验证数据
    handleLogin() {
      // this.$request(captchaApi.verifyBlockPuzzleCaptcha, captcha)
      this.loading = true
      this.$store
        .dispatch('user/login', this.primaryLoginForm)
        .then(() => {
          this.$router.push({ path: this.redirect || '/' })
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>
